<template>
  <div>
    <!-- 
      如果绑定时没有给方法写小括号，在实现方法时，会提供一个event对象
      缺点，不方便事件传参数
    -->
    <!-- <button v-on:click="showFn">新闻1</button> --
    <button @click="showFn">新闻2</button> -->
    <!-- 
      事件绑定时使用小括号：可以很方便的传数据
      在事件绑定时，使用小括号，但是还想要有event对象  vue提供$event变量，来完成数据传递
    -->
    <button v-on:click="showFn($event, 0)">新闻1</button> --
    <button @click="showFn($event, 1)">新闻2</button>
    <hr />
    <div v-show="show[0]">我是新闻1的内容</div>
    <div v-show="show[1]">我是新闻2222的内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: [true, false],
    };
  },
  // 事件方法定义
  methods: {
    // vue中绑定事件方法时，如果没有写小括号，它会自动给我们提供一个event对象
    /* showFn(evt) {
      console.log(evt);
    }, */
    showFn(evt, index) {
      let show = [false, false];
      show[index] = true;
      this.show = show;
      // console.log(evt.target.innerHTML);
    },
  },
};
</script>

<style lang="scss">
</style>
